<template>
  <div>
    <el-row>
      <el-col :span="4" style="height: 60px;">
        <h3>Wiki页面</h3>
      </el-col>
      <el-col :span="20" style="height: 60px; margin-top:14px;">
        <el-button-group>
          <el-button size="mini" icon="el-icon-plus" type="primary" @click="createWiki">新增</el-button>
          <el-button size="mini" icon="el-icon-edit" type="warning" @click="editWiki(detail.slug)" />
          <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteWiki(detail.slug)" />
        </el-button-group>
        <el-dropdown style="float:right" :hide-on-click="false" trigger="click">
          <el-button type="primary" size="mini">
            克隆Wiki <i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><span style="font-weight:600">使用SSH克隆</span>：</el-dropdown-item>
            <el-dropdown-item>
              <el-input v-model="sshRepo" autosize placeholder="请输入内容">
                <el-button
                  slot="append"
                  v-clipboard:copy="sshRepo"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError"
                  class="el-icon-document-copy"
                />
              </el-input>
            </el-dropdown-item>
            <el-dropdown-item><span style="font-weight:600">使用HTTPS克隆</span>：</el-dropdown-item>
            <el-dropdown-item>
              <el-input v-model="httpRepo" autosize placeholder="请输入内容">
                <el-button
                  slot="append"
                  v-clipboard:copy="httpRepo"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError"
                  class="el-icon-document-copy"
                />
              </el-input>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <el-row>
      <el-col v-model="data" v-loading="loadingTitle" :span="4">
        <el-card class="box-card">
          <ul style="padding-left: 0; padding-top: 0;">
            <li v-for="item in data" class="title">
              <el-link :underline="false">
                <span v-if="currentView === item.slug" :title="item.slug" style="color: #66b1ff" @click="getDetail(item.slug)">{{ item.title }}</span>
                <span v-else :title="item.slug" @click="getDetail(item.slug)">{{ item.title }}</span>
              </el-link>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col v-model="detail" v-loading="loadingContent" :span="20">
        <el-card class="box-card">
          <el-row :gutter="10">
            <el-col :span="6"><strong>{{ detail.title }}</strong></el-col>
            <el-col :span="6" :push="13">
            </el-col>
          </el-row>
          <el-divider />
          <el-row :gutter="10">
            <el-col :span="24">
              <vue-markdown :source="detail.content" />
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'
import { getData } from '@/api/requestData'

export default {
  components: {
    VueMarkdown
  },
  data() {
    return {
      loadingTitle: true,
      loadingContent: true,
      pid: this.$route.params.pid,
      pname: this.$route.params.pname,
      data: [],
      detail: {
        title: undefined,
        content: undefined,
        slug: undefined,
        format: 'markdown'
      },
      currentView: '',
      httpRepo: '',
      sshRepo: ''
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    onCopy(e) {
      // 复制成功
      this.$message.success('复制成功')
    },
    onError(e) {
      // 复制失败
      this.$message('复制失败')
    },
    fetchData() {
      getData('/git/public/wiki/list/' + this.pid).then((response) => {
        this.loadingTitle = false
        this.loadingContent = false
        this.data = response.data.wiki
        this.sshRepo = response.data.ssh
        this.httpRepo = response.data.http
        // 获取第一节的内容
        const firstSlug = this.data[0].slug
        this.currentView = this.data[0].slug
        getData('/git/public/wiki/detail/' + this.pid + '?slug=' + firstSlug).then((res) => {
          this.detail = res.data
        })
      }).catch(() => {})
    },
    getDetail(slug) {
      this.loadingContent = true
      getData('/git/public/wiki/detail/' + this.pid + '?slug=' + slug).then((res) => {
        this.detail = res.data
        this.currentView = res.data.slug
        this.loadingContent = false
      })
    },
    deleteWiki(slug) {
      this.$confirm('确定删除该流程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getData('/git/delete/wiki/' + this.pid + '?slug=' + slug).then((response) => {
          this.$message.success(response.message)
          this.fetchData()
        })
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },
    createWiki() {
      this.$prompt('页面标识串', '创建Wiki', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        inputPlaceholder: '您可以指定新文件的完整路径。'
      }).then(({ value }) => {
        this.$router.push({ path: '/git/wiki/create/' + this.pname + '/' + this.pid + '?slug=' + value })
      }).catch(() => {
        this.$message.info('取消创建Wiki')
      })
    },
    editWiki(slug) {
      this.$router.push({ path: '/git/wiki/edit/' + this.pname + '/' + this.pid + '?slug=' + slug })
    }
  }
}
</script>

<style scoped>
.title {
  height: 30px;
  width: 100%;
  line-height: 30px;
  list-style: none;
  display: block;
  text-align: left;
}

.title:hover {
  cursor: pointer;
}
</style>
